import src from "../../static/images/u5694.png";
import "./Park_investment_analysis.scss";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { useEffect, useState } from "react";
const Park_investment_analysis = () => {
  const bgGround = {
    // height: "100%",
    // width: "100%",
    backgroundImage: "url(" + src + ")", //图片的路径
  };
  //人员流量监控数据
  const flow = {
    chart: {
      type: "areaspline",
      height: 200,
      backgroundColor: "rgba(0,0,0,0)",
    },
    credits: {
      enabled: false,
    },
    title: {
      text: "",
    },

    legend: {
      enabled: false, //不显示图例
      layout: "vertical",
      align: "left",
      verticalAlign: "top",
      x: 10,
      y: 10,
      floating: true,
      borderWidth: 1,
      backgroundColor:
        (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
        "#FFFFFF",
    },
    xAxis: {
      categories: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      labels: {
        style: {
          color: "#ffffff",
        },
      },
    },
    yAxis: {
      title: {
        text: "",
      },
      labels: {
        style: {
          color: "#ffffff",
        },
      },
    },
    tooltip: {
      shared: true,
      valueSuffix: " 单位",
    },
    plotOptions: {
      areaspline: {
        fillOpacity: 0.5,
      },
    },
    series: [
      {
        data: [200, 250, 300, 450, 500, 450, 400, 200, 250, 300, 450, 500],
      },
    ],
  };
  //租金收入情况数据
  const income = {
    chart: {
      backgroundColor: "rgba(0,0,0,0)",
      type: "spline",
      height: 200,
    },
    credits: {
      enabled: false,
    },
    title: {
      text: "",
    },

    legend: {
      enabled: false, //不显示图例
      layout: "vertical",
      align: "left",
      verticalAlign: "top",
      x: 10,
      y: 10,
      floating: true,
      borderWidth: 1,
      backgroundColor:
        (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
        "#FFFFFF",
    },
    xAxis: {
      min: 0,
      gridLineDashStyle: "solid", //网格线实线
      gridLineWidth: 1,
      // tickPixelInterval: 40, //x轴刻度的间隔
      tickWidth: 0, // 刻度线的宽度, x轴默认为，y轴默认为0

      categories: ["11/20", "11/22", "11/24", "11/26", "11/28"],
      labels: {
        style: {
          color: "#ffffff",
        },
      },
    },
    yAxis: {
      tickPixelInterval: 30, //y轴刻度的间隔
      title: {
        text: "",
      },
      min: 0,
      labels: {
        style: {
          color: "#ffffff",
        },
      },
    },
    tooltip: {
      shared: true,
      valueSuffix: " 单位",
    },
    plotOptions: {
      areaspline: {
        fillOpacity: 0.5,
      },
    },
    series: [
      {
        data: [400, 200, 250, 300, 450],
      },
    ],
  };

  //当月收益汇总数据
  const profit = {
    chart: {
      type: "areaspline",
      height: 160,
      backgroundColor: "rgba(0,0,0,0)",
    },

    credits: {
      enabled: false,
    },
    title: {
      text: "",
    },

    legend: {
      enabled: false, //不显示图例
      layout: "vertical",
      align: "left",
      verticalAlign: "top",
      x: 10,
      y: 10,
      floating: true,
      borderWidth: 1,
    },
    xAxis: {
      categories: ["11/20", "11/22", "11/24", "11/26", "11/28", "11/30"],
    },
    yAxis: {
      title: {
        text: "",
      },
      // tickInterval: "20px",
    },
    tooltip: {
      shared: true,
      valueSuffix: " 单位",
    },
    plotOptions: {
      areaspline: {
        fillOpacity: 0.5,
      },
    },
    series: [
      {
        data: [400, 200, 250, 300, 450, 500],
      },
    ],
  };
  //企业种类占比数据
  const enterprise = {
    chart: {
      type: "pie",
      height: "160",
      backgroundColor: "rgba(0,0,0,0)",
    },
    title: {
      text: "",
    },
    credits: {
      enabled: false,
    },
    legend: {
      enabled: true, //不显示图例
      layout: "vertical",
      align: "right", //图例显示位置
      verticalAlign: "top",
      x: 10,
      y: 30,
      itemStyle: {
        color: "#ffffff", //修改饼图图例的文字颜色
      },
    },

    tooltip: {
      pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
    },
    colors: [
      "#2186E9",
      "#13C2C2",
      "#2FC25B",
      "#FACC14",
      "#F04864",
      "#f15c80",
      "#e4d354",
      "#8085e8",
      "#8d4653",
      "#91e8e1",
    ],
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: "pointer",
        dataLabels: {
          enabled: false,
        },
        showInLegend: true,
      },
    },
    series: [
      {
        name: "Brands",
        colorByPoint: true,

        size: "80%",
        innerSize: "60%",
        data: [
          {
            name: "个人独资企业",
            y: 61.41,
            sliced: false,
            selected: false,
          },
          {
            name: "私营企业",
            y: 11.84,
          },
          {
            name: "国有企业",
            y: 10.85,
          },
          {
            name: "联营企业",
            y: 4.67,
          },
          {
            name: "有限合伙企业",
            y: 4.18,
          },
        ],
      },
    ],
  };
  //人员流量监控
  const Charts1 = () => (
    <div>
      <HighchartsReact highcharts={Highcharts} options={flow} />
    </div>
  );
  const Charts2 = () => (
    <div>
      <HighchartsReact highcharts={Highcharts} options={income} />
    </div>
  );
  const Charts3 = () => (
    <div>
      <HighchartsReact highcharts={Highcharts} options={profit} />
    </div>
  );
  const Charts4 = () => (
    <div>
      <HighchartsReact highcharts={Highcharts} options={enterprise} />
    </div>
  );

  const [date, setDate] = useState({
    year: 2010,
    month: 10,
    day: 20,
    week: "星期一",
    lunarCalendar: "农历二月初一",
  });
  useEffect(() => {
    // let now = new Date();
    // setDate({
    //   year: now.getFullYear(),
    //   month: now.getMonth() + 1,
    //   day: now.getDay(),
    //   week: now.getDate(),
    //   lunarCalendar: now.getDate(),
    // });
  }, []);

  return (
    <div style={bgGround} className="parkInvestment">
      <div>
        <div>
          <div>
            <div>
              <span
                class="iconfont icon-a-26zulinqingkuang"
                style={{ color: "#027E8B", fontSize: "20px" }}
              ></span>
              <span>实际租赁情况</span>
            </div>
            <div className="lease">
              <div>
                <span>3490</span>
                <span>可租赁资产</span>
                <span></span>
              </div>
              <div>
                <span>87</span>
                <span>待租资产</span>
                <span></span>
              </div>
              <div>
                <span>2464</span>
                <span>已租资产</span>
                <span></span>
              </div>
              <div>
                <span>26</span>
                <span>到期资产</span>
                <span></span>
              </div>
            </div>
          </div>
          <div>
            <div>
              <span
                class="iconfont icon-a-32shouruqingkuang"
                style={{ color: "#027E8B", fontSize: "20px" }}
              ></span>
              <span>人员流量监控</span>
            </div>
            <div className="flow">
              <Charts1 />
            </div>
          </div>
          <div>
            <div>
              <span
                class="iconfont icon-a-9zichan"
                style={{ color: "#027E8B", fontSize: "20px" }}
              ></span>
              <span>租金收入情况</span>
            </div>
            <div className="unit">
              <span>单位：元</span>
              <span>本月收入：￥1025325.22</span>
            </div>
            <div>
              <Charts2 />
            </div>
          </div>
        </div>
        <div></div>
        <div></div>
        <div>
          <div>
            <div>11℃</div>
            <div>
              <div>
                {date.year}年{date.month}月{date.day}日
              </div>
              <div>
                {date.week}
                {date.lunarCalendar}
              </div>
            </div>
          </div>
          <div>
            <span>小雨</span>
            <span>持续无风向微风</span>
            <span>9-14℃</span>
          </div>
        </div>
      </div>
      <div className="buttom">
        <div className="title">
          <div>
            <span
              class="iconfont icon-a-9zichan"
              style={{ color: "#027E8B", fontSize: "20px" }}
            ></span>
            <span>当月收益汇总</span>
          </div>
          <div>
            <Charts3 />
          </div>
        </div>
        <div className="title">
          <div>
            <span
              class="iconfont icon-a-34qiyezhonglei"
              style={{ color: "#027E8B", fontSize: "20px" }}
            ></span>
            <span>企业种类占比</span>
          </div>
          <div>
            <Charts4 />
          </div>
        </div>
        <div className="remind">
          <div>
            <span
              class="iconfont icon-a-3tixing"
              style={{ color: "#027E8B", fontSize: "20px" }}
            ></span>
            <span>新增租赁提醒</span>
          </div>
          <div className="remindContent">
            <div>
              <div>签约</div>
              <div>
                <div>
                  <div>浙江久拓科技有限公司</div>
                  <div>股份制企业</div>
                </div>
                <div>
                  <div>A2幢3层504室</div>
                  <div>2022-02-26</div>
                  <div>朱毅豪</div>
                </div>
              </div>
            </div>
            <div>
              <div>签约</div>
              <div>
                <div>
                  <div>浙江久拓科技有限公司</div>
                  <div>股份制企业</div>
                </div>
                <div>
                  <div>A2幢3层504室</div>
                  <div>2022-02-26</div>
                  <div>朱毅豪</div>
                </div>
              </div>
            </div>
            <div>
              <div>签约</div>
              <div>
                <div>
                  <div>浙江久拓科技有限公司</div>
                  <div>股份制企业</div>
                </div>
                <div>
                  <div>A2幢3层504室</div>
                  <div>2022-02-26</div>
                  <div>朱毅豪</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="remind">
          <div>
            <span
              class="iconfont icon-a-3tixing"
              style={{ color: "#027E8B", fontSize: "20px" }}
            ></span>
            <span>租赁到期提醒</span>
          </div>
          <div className="remindContent">
            <div>
              <div>签约</div>
              <div>
                <div>
                  <div>浙江久拓科技有限公司</div>
                  <div>股份制企业</div>
                </div>
                <div>
                  <div>A2幢3层504室</div>
                  <div>2022-02-26</div>
                  <div>朱毅豪</div>
                </div>
              </div>
            </div>
            <div>
              <div>签约</div>
              <div>
                <div>
                  <div>浙江久拓科技有限公司</div>
                  <div>股份制企业</div>
                </div>
                <div>
                  <div>A2幢3层504室</div>
                  <div>2022-02-26</div>
                  <div>朱毅豪</div>
                </div>
              </div>
            </div>
            <div>
              <div>签约</div>
              <div>
                <div>
                  <div>浙江久拓科技有限公司</div>
                  <div>股份制企业</div>
                </div>
                <div>
                  <div>A2幢3层504室</div>
                  <div>2022-02-26</div>
                  <div>朱毅豪</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Park_investment_analysis;
